<style scoped>
.layout {
  /* border: 1px solid #d7dde4; f5f7f9*/
  background: #fff;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
.layout-logo {
  width: 100px;
  height: 30px;
  background: #5b6270;
  border-radius: 3px;
  float: left;
  position: relative;
  top: 15px;
  left: 20px;
}
.layout-nav {
  width: 420px;
  margin: 0 auto;
  margin-right: 20px;
}
.layout-footer-center {
  text-align: center;
}
</style>
<template>
  <div class="layout">
    <Layout v-if="login">
      <Header>
        <Menu mode="horizontal" theme="dark" active-name="1">
          <div class="layout-logo"></div>
          <div class="layout-nav">
            <MenuItem name="1">
              <Icon type="ios-navigate"></Icon>Item 1
            </MenuItem>
            <MenuItem name="2">
              <Icon type="ios-keypad"></Icon>Item 2
            </MenuItem>
            <MenuItem name="3">
              <Icon type="ios-analytics"></Icon>Item 3
            </MenuItem>
            <MenuItem name="4">
              <Icon type="ios-paper"></Icon>Item 4
            </MenuItem>
          </div>
        </Menu>
      </Header>
      <Layout :style="{padding: '0 50px'}">
        <Breadcrumb :style="{margin: '16px 0'}">
          <BreadcrumbItem>Home</BreadcrumbItem>
          <BreadcrumbItem>Components</BreadcrumbItem>
          <BreadcrumbItem>Layout</BreadcrumbItem>
          <Button type="primary" ghost style="float:right" @click="signOut()">sign out</Button>
        </Breadcrumb>
        <Content :style="{padding: '24px 0', minHeight: '280px', background: '#fff'}">
          <Layout>
            <Sider hide-trigger :style="{background: '#fff'}">
              <Menu active-name="1-2" theme="light" width="auto" :open-names="['1']">
                <Submenu name="1">
                  <template slot="title">
                    <Icon type="ios-navigate"></Icon>
                    <router-link to="/user">用户管理</router-link>
                  </template>
                </Submenu>
                <Submenu name="2">
                  <template slot="title">
                    <Icon type="ios-keypad"></Icon>
                    <router-link to="/cate">分类管理</router-link>
                  </template>
                </Submenu>
                <Submenu name="3">
                  <template slot="title">
                    <Icon type="ios-analytics"></Icon>
                    <router-link to="/news">新闻管理</router-link>
                  </template>
                </Submenu>
                <Submenu name="4">
                  <template slot="title">
                    <Icon type="ios-analytics"></Icon>
                    <router-link to="/product">产品管理</router-link>
                  </template>
                </Submenu>
                <Submenu name="5">
                  <template slot="title">
                    <Icon type="ios-analytics"></Icon>
                    <router-link to="/comment">评论管理</router-link>
                  </template>
                </Submenu>
              </Menu>
            </Sider>
            <Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
              <router-view></router-view>
            </Content>
          </Layout>
        </Content>
      </Layout>
      <Footer class="layout-footer-center">2011-2016 &copy; TalkingData</Footer>
    </Layout>
    <template v-else>
      <div
        style="width:400px;height:200px;padding:30px 30px 20px;background:#7ab3ff;position:relative;left:50%;margin-left:-175px;margin-top:12%"
      >
        <Form ref="formInline" :model="formInline" :rules="ruleInline">
          <FormItem prop="user">
            <Input type="text" v-model="formInline.user" placeholder="Username">
              <Icon type="ios-person-outline" slot="prepend"></Icon>
            </Input>
          </FormItem>
          <FormItem prop="password">
            <Input type="password" v-model="formInline.password" placeholder="Password">
              <Icon type="ios-lock-outline" slot="prepend"></Icon>
            </Input>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="handleSubmit('formInline')" style="float:right">Sign in</Button>
          </FormItem>
        </Form>
      </div>
    </template>
  </div>
</template>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";

export default {
  data() {
    return {
      formInline: {
        user: "",
        password: ""
      },
      ruleInline: {
        user: [
          {
            required: true,
            message: "Please fill in the user name",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "Please fill in the password.",
            trigger: "blur"
          }
        ]
      },
    };
  },
  computed: {
    ...mapGetters(["login"])
  },
  methods: {
    ...mapActions(["checkLogin"]),
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          console.log(this.formInline.user, this.formInline.password);
          this.checkLogin({
            name: this.formInline.user,
            password: this.formInline.password
          });
          this.formInline.user="";
          this.formInline.password="";
        } else {
          this.$Message.error("Fail!");
        }
      });
    },
    signOut() {
      this.$store.state.login = false;
    }
  }
};
</script>